<template>
	<!-- 直属数据 -->
	<div class="direct-data">
		<ClaendarInput v-model:date="date" v-model:showCalendar="showCalendar" />
		<nut-input clearable class="search-input" v-model="searchValue" @blur="blurSearch" placeholder="请输入账号"
			:border="false">
			<template #left>
				<iconpark-icon icon-id="search1-g2037c3l" size="1.2rem"></iconpark-icon>
			</template>
		</nut-input>
		<ul class="direct-data-list">
			<nut-infinite-loading load-more-txt="暂无数据" v-model="infinityValue" :has-more="hasMore"
				@load-more="loadMore">
				<div class="list-item" v-for="(item, index) in listData" :key="index">
					<div class="header" v-if="showHeader">
						<div class="left">
							<iconpark-icon :class="`V${item.vip_level}`" icon-id="copy1-g203620m"
								size="1.2rem"></iconpark-icon>
							<span class="user-name">{{ item.user_name }}</span>
							<iconpark-icon class="edit-icon" icon-id="edit" size="1.2rem"></iconpark-icon>
						</div>
						<div class="right">
							他的下级：<span class="num">{{ item.count }}</span>
						</div>
					</div>

					<div class="content">
						<p class="label">
							充值金额：<span class="value">{{ item.deposit }}</span>
						</p>
						<p class="label">
							注册日期：<span class="value">{{ item.register_date }}</span>
						</p>
						<p class="label">
							有效投注：<span class="value num"> {{ item.bet }}</span>
						</p>
						<p class="label">
							最后登录：<span class="value">{{ item.login_date }}</span>
						</p>
						<p class="label">
							状态：<span class="value">{{ item.status }}</span>
						</p>
						<p class="label">
							佣金：<span class="value">{{ item.return }}</span>
						</p>
					</div>
				</div>
			</nut-infinite-loading>
		</ul>

		<div class="empty-data" v-if="listData.length === 0">
			<img class="empty-data-img" :key="'nodata'" v-lazy="'/imgs/email/no_data.png'" alt="" />
			<span>暂无数据</span>
		</div>

		<div class="count-box">
			<p class="label w-70">
				注册人数：<span class="value">{{ totalInfo.new }}</span>
			</p>
			<p class="label">
				充值人次：<span class="value">{{ totalInfo.deposit_num }}</span>
			</p>
			<p class="label w-70">
				首充人数：<span class="value">{{ totalInfo.deposit1_num }}</span>
			</p>
			<p class="label">
				充值金额：<span class="value">{{ totalInfo.deposit }}</span>
			</p>
			<p class="label w-70 m-0">
				有效投注：<span class="value">{{ totalInfo.bet }}</span>
			</p>
		</div>
	</div>
</template>

<script setup lang="ts">
import { reactive, toRefs, watch } from 'vue';
import ClaendarInput from '@/components/ClaendarInput.vue'; // 引入 ClaendarInput 组件
import { NetPacket } from '@/netBase/NetPacket';
import PKwebsocket from '@/lolo/Ws';
import { formatDate } from '../utils';

const data = reactive({
	page: 1, // 页码
	date: <[Date, Date]>[new Date(), new Date()], // 日期
	searchValue: '', // 搜索值
	infinityValue: false, // 是否无限加载
	hasMore: true, // 是否还有更多
	listData: <any[]>[], // 数据列表
	showHeader: true, // 是否显示头部
	showCalendar: false, // 是否显示日历
	totalInfo: {
		new: 0, // 注册人数
		deposit_num: 0, // 充值人次
		deposit1_num: 0, // 首充人数
		deposit: 0, // 充值金额
		bet: 0, // 有效投注
	},
});

const { totalInfo, page, date, searchValue, infinityValue, hasMore, listData, showHeader, showCalendar } = toRefs(data);

const loadMore = async () => {
	page.value++;
	await getDirectData();
};

const blurSearch = () => {
	page.value = 1;
	listData.value = [];
	hasMore.value = true;
	getDirectData();
};

const getDirectData = async () => {
	// @ts-ignore
	const req = NetPacket.req_follower_detailed_info();

	req.page = page.value;
	req.type = 1;
	req.user_name = searchValue.value;
	Object.assign(req.start_time, formatDate(date.value[0]));
	Object.assign(req.end_time, formatDate(date.value[1]));

	PKwebsocket.instance.send(req, true, {
		callbackName: 'msg_notify_follower_detailed_info',
		callback: getDirectDataHandle,
	});
};

const getDirectDataHandle = (data: any) => {
	totalInfo.value = {
		deposit1_num: data.deposit1_num,
		deposit_num: data.deposit_num,
		new: data.new,
		deposit: data.deposit,
		bet: data.bet,
	};
	if (data.total > page.value) {
		listData.value = [...listData.value, ...data.info];
	} else {
		hasMore.value = false;
	}
};

watch(
	() => showCalendar.value,
	(value) => {
		if (!value) {
			page.value = 1;
			listData.value = [];
			hasMore.value = true;
			getDirectData();
		}
	},
	{ immediate: true }
);
</script>

<style lang="scss" scoped>
.input-box {
	border-radius: 8px;
	background: #1d1c3c;
	box-shadow: 0.5px 0.5px 1px 0px #333260 inset;
	display: flex;
	align-items: center;
	height: 40px;
	width: 100%;
	padding: 0 14px;

	.txt {
		color: #c6c4f5;
		font-size: 14px;
		font-weight: 400;
		line-height: 14px;
		margin-left: 8px;
	}
}

.direct-data {
	height: 100%;
	position: relative;
	padding: 0 10px 10px;
	box-sizing: border-box;

	.search-input {
		margin-top: 8px;
		height: 36px;
		box-sizing: border-box;
		border-radius: 8px;
		background: #1d1c3c;
		box-shadow: 0.5px 0.5px 1px 0px #333260 inset;
		padding: 0 8px 0 14px;
		display: flex;
		align-items: center;

		:deep() {
			.input-text {
				font-size: 14px;
				color: #c6c4f5;
			}

			.input-text::placeholder {
				color: #504f6f;
			}
		}
	}

	.direct-data-list {
		position: absolute;
		top: 94px;
		bottom: 80px;
		width: 100%;
		overflow-y: scroll;
		overflow-x: hidden;

		.list-item {
			border-radius: 12px;
			background: #131232;
			margin-bottom: 8px;

			.header,
			.content {
				height: 36px;
				padding: 0 14px;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				border-bottom: 0.5px solid #242352;
				flex-wrap: wrap;

				.left {
					display: flex;
					align-items: center;
					width: 50%;

					.level-icon {
						color: #fff;
						margin-right: 4px;
					}

					.user-name {
						margin-right: 4px;
						font-weight: 500;
						color: #fff;
						font-size: 14px;
					}
				}

				.right {
					width: 50%;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					flex: 1;
					color: #c6c4f5;
					font-size: 12px;
					font-style: normal;
					font-weight: 400;

					.num {
						color: #5b6cff;
						font-family: 'PingFang SC';
						font-size: 12px;
						font-style: normal;
						font-weight: 500;
						line-height: normal;
						text-decoration-line: underline;
						text-decoration-style: solid;
						text-decoration-skip-ink: none;
						text-decoration-thickness: auto;
						text-underline-offset: auto;
						text-underline-position: from-font;
					}
				}
			}

			.content {
				height: auto;
				padding: 14px 14px 6px 14px;

				.label {
					color: #c6c4f5;
					font-size: 12px;
					font-style: normal;
					font-weight: 400;
					display: flex;
					align-items: center;
					width: 50%;
					margin-bottom: 8px;

					.value {
						color: #fff;
					}

					.num {
						color: #5b6cff;
						font-family: 'PingFang SC';
						font-size: 12px;
						font-style: normal;
						font-weight: 500;
						line-height: normal;
						text-decoration-line: underline;
						text-decoration-style: solid;
						text-decoration-skip-ink: none;
						text-decoration-thickness: auto;
						text-underline-offset: auto;
						text-underline-position: from-font;
					}
				}
			}
		}
	}

	.empty-data {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 140px;
		height: 140px;
		margin: 20% auto;

		.empty-data-img {
			width: 140px;
			height: 140px;
		}

		span {
			color: #c6c4f5;
			font-size: 14px;
			font-weight: 400;
			line-height: 14px;
			margin-top: 8px;
		}
	}

	.count-box {
		background: #100e26;
		box-shadow: 0px 1px 0px 0px #282747 inset;
		height: 80px;
		position: fixed;
		z-index: 100;
		bottom: 0;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		padding: 8px 8px 6px 8px;

		.label {
			color: #c6c4f5;
			font-size: 12px;
			font-style: normal;
			font-weight: 400;
			display: flex;
			align-items: center;
			width: 30%;

			&.m-0 {
				margin: 0;
			}

			&.w-70 {
				width: 70%;
			}

			.value {
				color: #fff;
			}
		}
	}
}
</style>
